<template>
  <div class="mian-box">
    <div class="table-box">
      <div class="head-search">
        <el-form ref="ruleFormRef" :model="formInline" label-width="auto" class="demo-ruleForm" size="small" status-icon >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="清输入姓名" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-button
                type="primary"
                style="color: #fff"
                color="#20B1EB"
                @click="onSubmit"
                >搜索</el-button
              >
              <el-button @click="onShow('add')">新增</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <e-el-table :data="personnelData">
        <template #operation>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template #default="item">
              <el-button link type="primary" size="small" style="margin: 2px;">启用</el-button>
              <el-button link type="primary" size="small" style="margin: 2px;" @click="onShow(item)">修改</el-button>
              <el-popconfirm title="确定要删除么?">
                <template #reference>
                  <el-button link type="primary" size="small" style="margin: 2px;">删除</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm title="确定要重置密码么?">
                <template #reference>
                  <el-button link type="primary" size="small" style="margin: 2px;">重置密码</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </e-el-table>
      
    </div>
    <div class="role-list">
      <div class="title">【角色名】所属角色列表</div>
      <div class="role">
        <el-divider content-position="left">所有角色</el-divider>
        <div class="role-box">
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>你好你好</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>系统管理员</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>医保办</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>护理部</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>护理不良主任</p>
          </div>

          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>护理不良主任</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>护理不良主任</p>
          </div>
          <div class="role-item">
            <el-icon :size="30"><UserFilled /></el-icon>
            <p>护理不良主任</p>
          </div>
        </div>
      </div>
    </div>
    <e-el-dialog ref="editRef"></e-el-dialog>
  </div>
  
</template>
 
<script setup lang="ts">

import eElTable from "./components/e-el-table.vue";
import eElDialog from "./components/e-el-dialog.vue";
import { treeData, personnelData } from './json.ts'
import { gettest } from "@/api/index";
import { UserFilled } from "@element-plus/icons-vue";
// 请求
const testapi = () => {
  gettest()
}
testapi()


const formInline = reactive({
  name: "",
  region: "",
});
const editRef = ref<InstanceType<typeof eElDialog> | null>(null);

const onSubmit = (_e:any) => {};
const onShow = (item:any) => {
  console.log(item)
  editRef.value?.openDialog()
};

</script>
 
<style lang='scss' scope>
.mian-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* background: #fff; */
  
  display: flex;
  justify-content:space-between;
  .table-box {
    width: 60%;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    .head-search{
      padding-top: 10px;
    }
  }
  .role-list{
    width: calc(40% - 15px);
    background: #fff;
    height: 100%;
    border-radius: 5px;
    padding: 6px;
    box-sizing: border-box;
    .role{
      .role-box{
        display: flex;
        flex-wrap: wrap;
        .role-item{
          text-align: center;
          padding: 5px;
          border-radius: 5px;
          width: 60px;
          p{
            font-size: 12px;
          }
        }
      }
    }
  }
}
.explain {
  max-height: 50px;
  overflow-y: auto;
}
.avatar-uploader {
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>